<template>
  <div class="article-page">
    <div class="banner">
      <div class="container">
        <h1>{{ my_article.article.title }}</h1>

        <div class="article-meta">
          <a href="/profile/eric-simons"><img :src="my_article.article.author.image" /></a>
          <div class="info">
            <a href="/profile/eric-simons" class="author">{{ my_article.article.author.username }}</a>
            <span class="date">{{ my_article.article.author.bio }}</span>
          </div>
          <span v-if="userInfo?.username !== my_article.article.author.username">
            <button class="btn btn-sm btn-outline-secondary">
              <i class="ion-plus-round"></i>
              &nbsp; Follow {{ my_article.article.author.username }} <span class="counter">(10)</span>
            </button>
            &nbsp;&nbsp;
            <button class="btn btn-sm btn-outline-primary">
              <i class="ion-heart"></i>
              &nbsp; Favorite Post <span class="counter">({{ my_article.article.favoritesCount }})</span>
            </button>
          </span>

          <span v-else>
            <button class="btn btn-sm btn-outline-secondary">
              <i class="ion-edit"></i>
              <RouterLink :to="{ name: 'update_article', params: { article_id: my_article.article.slug } }">Edit Article
              </RouterLink>
            </button>
            <button class="btn btn-sm btn-outline-danger">
              <i class="ion-trash-a"></i> Delete Article
            </button>
          </span>

        </div>
      </div>
    </div>

    <div class="container page">
      <div class="row article-content">
        <div class="col-md-12">
          <p>
            {{ my_article.article.description }}
          </p>
          <h2 id="introducing-ionic">Introducing RealWorld.</h2>
          <p>It's a great solution for learning how other frameworks work.</p>
          <ul class="tag-list" v-for="item in my_article.article.tagList">
            <li class="tag-default tag-pill tag-outline">{{ item }}</li>
          </ul>
        </div>
      </div>

      <hr />

      <div class="article-actions">
        <div class="article-meta">
          <a href="profile.html"><img :src="my_article.article.author.image" /></a>
          <div class="info">
            <a href="" class="author">{{ my_article.article.author.username }}</a>
            <span class="date">{{ my_article.article.author.bio }}</span>
          </div>
          <span v-if="userInfo?.username !== my_article.article.author.username">
            <button class="btn btn-sm btn-outline-secondary">
              <i class="ion-plus-round"></i>
              &nbsp; Follow {{ my_article.article.author.username }} <span class="counter">(10)</span>
            </button>
            &nbsp;&nbsp;
            <button class="btn btn-sm btn-outline-primary">
              <i class="ion-heart"></i>
              &nbsp; Favorite Post <span class="counter">({{ my_article.article.favoritesCount }})</span>
            </button>
          </span>

          <span v-else>
            <button class="btn btn-sm btn-outline-secondary">
              <i class="ion-edit"></i>
              <RouterLink :to="{ name: 'update_article', params: { article_id: my_article.article.slug } }">Edit Article
              </RouterLink>
            </button>
            <button class="btn btn-sm btn-outline-danger">
              <i class="ion-trash-a"></i> Delete Article
            </button>
          </span>
        </div>
      </div>

      <div v-if="!isLogin">Sign in or sign up to add comments on this article.</div>

      <div v-else class="row">
        <div class="col-xs-12 col-md-8 offset-md-2">
          <commentFrom @create-comment="addComment"></commentFrom>
          <commentItem :comment="item" v-for="item in comments_sort" :key="item.id"></commentItem>

        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getArticle, getcomments } from '@/api';
import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router'
import { ArticleDetail, MultComments, Comment } from '@/model';
import { useUserStore } from '@/store/user'
import { storeToRefs } from 'pinia'
import commentFrom from '@/components/comment-from.vue';
import commentItem from '@/components/comment-item.vue'

const store = useUserStore();
let { userInfo } = storeToRefs(store)
let { isLogin } = storeToRefs(store)

const route = useRoute()

const my_article = ref<ArticleDetail>({
  article: {
    slug: '1',
    title: '',
    description: '',
    tagList: [],
    createdAt: '',
    updatedAt: '',
    favorited: false,
    favoritesCount: 0,
    author: {
      username: '',
      bio: '',
      image: '',
      following: false
    }
  }
});

const my_comments = ref<MultComments>({
  comments: []
})

//使用slice()防止对原数组产生影响
const comments_sort = computed(() => {
  return my_comments.value.comments.slice().sort((a, b) => {
    return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
  })
})

getcomments(route.params.article_id as string).then(res => {
  my_comments.value = res.data
})

getArticle(route.params.article_id as string).then(res => {
  my_article.value = res.data
})

function addComment(comment: Comment) {
  my_comments.value.comments.push(comment)
}

watch(
  () => route.params.article_id
  ,
  (new_value) => {
    getArticle(new_value as string).then(res => {
      my_article.value = res.data
    })
  })
</script>
<style scoped></style>
